﻿@model Guid
@section Styles{
    <style type="text/css">
        html,
        body {
            background: #ffffff;
        }
    </style>
}
@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@Model' id="hidden_id" />
    <!-- 配置文件 -->
    <script src="~/admin/libs/neditor/neditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script src="~/admin/libs/neditor/neditor.all.min.js"></script>
    <script src="~/admin/libs/neditor/i18n/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var id = document.getElementById('hidden_id').value;
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/Member",
                    form: {
                        saveState: false,
                        vm: {
                            model: {},
                            sysUser: {}
                        },
                        Photo: null,
                        Files: [],
                        FilesName: [],
                        editor: {}
                    }
                }
            },
            computed:{
                formKey:function (){
                    return id ? id : '';
                }
            },
            created: function () {
                var _this = this;
                //编辑器 配置
                this.form.editor = UE.getEditor('introduce');
                this.form.editor.addListener('blur', function (e) {
                    _this.form.vm.model.introduce = _this.form.editor.getContent();
                });
                this.loadForm();
            },
            mounted: function () {

            },
            methods: {
                loadForm: function () {
                    var _this = this;
                    var path = _this.prefix + "/FindForm/" + this.formKey;

                    hzyAdmin.httpGet(path, {}, function (r) {
                        if (r.code !== 1) return;
                        _this.form.vm = r.data;
                        //处理文件
                        if (_this.form.vm.model.filePath) _this.form.FilesName = _this.form.vm.model.filePath.split(',');
                        //处理编辑器值
                        setTimeout(function () {
                            _this.form.editor.setContent(_this.form.vm.model.introduce ?
                                _this.form.vm.model.introduce.replace(/'/g, '\'') :
                                "");
                        }, 200);
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    var _this = this;
                    var path = _this.prefix + "/SaveForm";

                    //验证
                    if (!this.form.vm.model.name) return hzyAdmin.alert('会员名称不能为空!', '警告');

                    //组装数据
                    var formData = new FormData();
                    for (var key in this.form.vm.model) {
                        var value = this.form.vm.model[key];
                        formData.append(key, value ? value : '');
                    }

                    if (this.form.Photo) formData.append('Photo', this.form.Photo);

                    for (var i = 0; i < this.form.Files.length; i++) {
                        var item = this.form.Files[i];
                        formData.append('Files[' + i + ']', item);
                    }

                    this.form.saveState = true;
                    hzyAdmin.httpUpload(path, formData, function (r) {
                        _this.form.saveState = false;
                        if (r.code === 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                },
                photoChange: function (e) {
                    var files = e.target.files;
                    if (files.length > 0) {
                        this.form.vm.model.photo = hzyAdmin.getObjectUrl(files[0]); //显示
                        this.form.Photo = files[0];
                    }
                },
                fielsChange: function (e) {
                    var files = e.target.files;
                    if (files.length > 0) {
                        //for (var i = 0; i < files.length; i++) {
                        //    var item = files[i];
                        //    this.form.FielsName.push(item.filename);
                        //}
                        this.form.Files = files;
                    }
                },
                //查找带回
                findBack_User: function (isRemove) {
                    if (isRemove) {
                        //清空信息
                        this.form.vm.model.userId = '';
                        this.form.vm.sysUser.name = '';
                        return;
                    }
                    //打开页面查找带回信息
                    var _this = this;
                    var path = "/Admin/SysUser/Index?findBack=1";

                    hzyAdmin.openPage('请选择用户', path, function (row) {
                        console.log('查找带回 行数据', row);
                        if (row == null) return;
                        _this.form.vm.model.userId = row.id;
                        _this.form.vm.sysUser.name = row.name;

                    }, 1200, 1000);
                }

            }
        });
    </script>
}
<div class="m-20 hzyAdminForm" id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4">
                <h4 class="example-title">编号</h4>
                <input type="text" class="form-control" placeholder="请输入 编号" v-model="form.vm.model.number"
                       autocomplete="off" />
            </div>
            <div class="col-sm-4">
                <h4 class="example-title">会员名称</h4>
                <input type="text" class="form-control" placeholder="请输入 会员名称" v-model="form.vm.model.name"
                       autocomplete="off" />
            </div>
            <div class="col-sm-4">
                <h4 class="example-title">联系电话</h4>
                <input type="text" class="form-control" placeholder="请输入 联系电话" v-model="form.vm.model.phone"
                       autocomplete="off" />
            </div>
            <div class="col-sm-4">
                <h4 class="example-title">生日</h4>
                <el-date-picker type="date" placeholder="请选择 生日" v-model="form.vm.model.birthday"
                                format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
            </div>
            <div class="col-sm-4">
                <h4 class="example-title">性别</h4>
                <el-radio v-model="form.vm.model.sex" label="男">男</el-radio>
                <el-radio v-model="form.vm.model.sex" label="女">女</el-radio>
            </div>
            <div class="col-sm-4">
                <h4 class="example-title">账户</h4>
                <!--<div class="hzyAdmin-FindBack-Container">
                    <input type="text" class="form-control" readonly="readonly" v-model="form.vm.sysUser.User_Name">
                    <div class="hzyAdmin-FindBack-Btns">
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User()">
                            <i class="fas fa-search"></i>
                        </button>
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User(1)">
                            <i class="fas fa-trash-alt text-danger"></i>
                        </button>
                    </div>
                </div>-->
                <!--旧版查找带回 样式-->
                <div class="input-group">
                    <input type="text" class="form-control" readonly="readonly" v-model="form.vm.sysUser.name">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User()">
                            <i class="fas fa-search"></i>
                        </button>
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User(1)">
                            <i class="fas fa-trash-alt text-danger"></i>
                        </button>
                    </div>
                </div>

            </div>

            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-6">
                        <h4 class="example-title">头像</h4>
                        <input type="file" @@change="photoChange" />
                        <br />
                        <img width="150" class="rounded" :src="form.vm.model.photo" v-show="form.vm.model.photo" />
                    </div>
                    <div class="col-sm-6">
                        <h4 class="example-title">文件</h4>
                        <input type="file" @@change="fielsChange" multiple="multiple" />
                        <ul class="list-group">
                            <li class="list-group-item" v-for="(item,index) in form.FilesName" :key="index">
                                <a :href="item" target="_blank">{{item}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <h4 class="example-title">简介</h4>
                <script id="introduce" name="introduce" style="width:100%;height:300px" type="text/plain">
                </script>
            </div>

        </div>
        <div class="hzyAdminForm-footer">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-primary" @@click="save" v-bind:disabled="form.saveState"
                            v-if="power.Save">
                        保存
                    </button>
                    <button class="btn btn-danger" @@click="closeWindow()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>